前面在第四篇的時候有稍微說明JSX是什麼東西和有什麼優點，

這一篇我們要來試著使用JSX 在React裡面 來渲染出一個Table !!

在我們印象中的Table，除了有標題以外，還有一列一列的內容

• 標題會放在 html 標籤 thead 的tr裡，且每個tr等於列,裡面的欄 要使用th
• 內文會放在 html 標籤 tbody 的 tr裡 ，且每個tr等於一列，裡面的欄 則要使用td

大概類似下面這張圖 ↓

對Table的樣子熟悉後，再來是Array陣列，我們的tr的資料型態當然是Array !! 很少很少會是一行一行寫死的 ..

假設我們要放進Table的資料長以下這樣 ↓

let testArray = [
		{
			name:"employee1",
			age:"26"
		},
		{
			name:"employee2",
			age:"29"
		}
]

我們要怎麼樣在React遍歷它們呢 !?

• 在React Component 的render function 裡先畫好一個Table的雛形

    render() {
    	return(
    		 <div className="App">
                <table>
                    <thead>
                        <tr>
                          <th>姓名</th>
                          <th>年齡</th>
                        </tr>
                    </thead>
  
                </table>
      	</div>
    	)
    }
  

• 將資料遍歷在Tbody裡 (以下有兩種做法)

  1. 將遍歷的Tr寫成一個陣列常數

       render() {
           let testArray=[
             {
               name:"employee1",
               age:"26"
             },
             {
               name:"employee2",
               age:"29"
             }
           ]
           const tbodyContent=testArray.map(function(value,index){
     
             return(
               <tr>
                   <td>{value.name}</td>
                   <td>{value.age}</td>
     
               </tr>
           )
       	return(
       		 <div className="App">
                   <table>
                       <thead>
                         	<tr>
                                 <th>姓名</th>
                                 <th>年齡</th>
                             </tr>
                       </thead>
                       <tbody>
                       	{tbodyContent}
                       </tbody>
     
                   </table>
         	</div>
       	)
       }
     

  2. 直接在Tbody裡遍歷

       render() {
       	return(
       		 <div className="App">
                   <table>
                       <thead>
                        		<tr>
                                 <th>姓名</th>
                                 <th>年齡</th>
                             </tr>
                       </thead>
                       <tbody>
                       	{testArray.map(function(value,index){
     
                             return(
                               <tr>
                                   <td>{value.name}</td>
                                   <td>{value.age}</td>
     
                               </tr>
                          	 )
                           }
                       </tbody>
     
                   </table>
         	</div>
       	)
       }
     

這時候呢!! 不要以為在頁面上看見table和渲染出來的資料就沒問題了~

我們打開 f12 看看熟悉的console視窗 ，是不是有偷偷警告我們什麼 !?

這事告訴我們當我們跑迴圈遍歷的時候，我們必須給予每一筆資料一個獨一無二的KEY值，
通常可以直接用陣列的index值

  render() {
  	return(
  		 <div className="App">
              <table>
                  <thead>
                   		<tr>
                            <th>姓名</th>
                            <th>年齡</th>
                        </tr>
                  </thead>
                  <tbody>
                  	{testArray.map(function(value,index){

                        return(
                          <tr key={index}>
                              <td>{value.name}</td>
                              <td>{value.age}</td>

                          </tr>
                     	 )
                      }
                  </tbody>

              </table>
    	</div>
  	)
  }

這樣就解決了那看起來令人煩躁的報錯了 ヽ(^o^)丿

下一篇要來說明怎麼樣在React Component裡建立一個function，
並透過State傳入到子類別當prop使用在事件(event)上面，
例如onClick , onBlur ... 等等的 ~

加油加油 !! 再撐幾篇我們就要進入測試了~